<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap模板</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="../js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="text-align: right;color: red">
        <c:if test="${not empty user}">
            欢迎${user.username}
        </c:if>
    </div>
    <h3 style="text-align: center">显示所有联系人</h3>

    <%--TODO：用于条件查询的表单对象--%>
    <form action="/contact" method="post">

        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th colspan="9">
                    <input type="hidden" name="method" value="findByCondition">
                    姓名：<input type="text" placeholder="${map.name}" name="name"/>
                    QQ:<input type="text" placeholder="${map.qq}" name="qq"/>
                    年龄：<input type="number" placeholder="${map.min}" name="min" style="width: 50px;"/>
                    -- <input type="number" placeholder="${map.max}" name="max" style="width: 50px;">
                    <input  class="btn btn-primary"  type="submit" value="搜索">

                </th>
            </tr>
        </table>
    </form>


    <%--TODO：用于批量删除的表单数据--%>
    <form id="formId" action="/contact" method="post">
    <%--TODO: 获取请求标记--%>
        <input type="hidden" name="method" value="deleteAll">
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>
    <%-- TODO: 复选框全选和全不选的操作--%>
                <input type="checkbox" onclick="checkAll(this.checked)">
            </th>

            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
    <c:forEach items="${list}" var="contact">
        <tr>
            <td>
                <input type="checkbox" class="ck_item" name="ids" value="${contact.id}">
            </td>
            <td>${contact.id}</td>
            <td>${contact.name}</td>
            <td>${contact.sex}</td>
            <td>${contact.age}</td>
            <td>${contact.address}</td>
            <td>${contact.qq}</td>
            <td>${contact.email}</td>
            <td><a class="btn btn-default btn-sm" href="/contact?method=findContactById&id=${contact.id}">
                修改</a>&nbsp;<a class="btn btn-default btn-sm" href="JavaScript:deleteById(${contact.id})">删除</a></td>
        </tr>
    </c:forEach>
        <tr>
            <td colspan="9" align="center">
<%--            <a class="btn btn-primary" href="/contact/add.jsp">删除选中</a>--%>
<%--                <input class="btn btn-primary" type="submit" value="删除选中">--%>

              <a class="btn btn-danger" href="JavaScript:deleteAll()">删除联系人</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a class="btn btn-primary" href="/contact/add.jsp">添加联系人</a>

            </td>
        </tr>
    </table>

    </form>
</div>
</body>
</html>

<script>

    function deleteAll(){
        let flage = confirm("您确定要删除吗？")
        if (flage){
            //  todo:javaScript提交表单
            let formObj = document.getElementById("formId");
            formObj.submit();
        }
    }

    function checkAll(flag) {

        //alert(flag);
        // 获取其他的复选框对象
        let ckItemObjArr = document.getElementsByClassName("ck_item");
        for(let i=0;i<ckItemObjArr.length;i++){
            ckItemObjArr[i].checked = flag;
        }
    }


    function deleteById(id){
        // alert(id);
        let flage = confirm("您确定要删除吗？")
        if (flage){
            location.href = "/contact?method=deleteContactById&id="+id;
        }

    }
</script>
